import { randomNum } from "@/utils/util";
import * as echarts from "echarts";
import "./index.scss";
import { useEcharts } from "@/hooks/useEcharts";
import { dayjs } from "element-plus";
export default defineComponent({
	setup() {
		const chartView = ref();
		let option = {
			xAxis: {
				type: "category",
				data: [] as string[],
				axisLine: {
					lineStyle: {
						color: "#09F9C0",
						width: 2
					}
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					color: "#fff",
					fontSize: 13,
					fontWeight: 500
				}
			},
			yAxis: {
				type: "value",
				axisLine: {
					show: true,
					lineStyle: {
						color: "#2695F6",
						width: 2
					}
				},
				axisLabel: {
					formatter: "{value} %",
					color: "#fff",
					fontSize: 13,
					fontWeight: 500
				},
				splitLine: {
					lineStyle: {
						color: "#0E507C",
						type: [5, 5],
						dashOffset: 3
					}
				}
			},
			tooltip: {
				trigger: "axis",
				formatter: "{b} <br/> {a}: {c} %"
			},
			series: [
				{
					name: "电源系统负荷",
					smooth: 0.6,
					symbol: "circle",
					symbolSize: 6,
					itemStyle: {
						// 设置symbol的颜色
						normal: {
							color: "#09F9C0"
						}
					},
					lineStyle: {
						color: "#09F9C0",
						width: 5
					},
					data: [] as number[],
					type: "line",
					areaStyle: {
						color: {
							//线性渐变
							type: "linear",
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [
								{
									offset: 0,
									color: "rgba(9, 249, 192,0.8)" // 0% 处的颜色
								},
								{
									offset: 1,
									color: "rgba(255,220,24,0)" // 100% 处的颜色
								}
							],
							global: false // 缺省为 false
						}
					},
					markPoint: {
						symbolSize: 8,
						symbol: "circle",
						data: [
							{
								type: "max"
							}
						],
						itemStyle: {
							shadowOffsetX: 0,
							shadowBlur: 50,
							borderWidth: 3,
							borderColor: "#09F9C0",
							color: "#fff"
						},
						label: {
							position: "top",
							color: "#fff",
							fontWeight: 400,
							fontSize: 20,
							formatter: "{c}%"
						}
					}
				}
			],
			grid: {
				left: 50,
				top: 30,
				right: 10,
				bottom: 30
			}
		};
		const echartsResize = () => {
			myChart && myChart.resize();
		};
		let myChart: echarts.ECharts;
		window.addEventListener("resize", echartsResize);
		onMounted(() => {
			nextTick(() => {
				myChart = echarts.init(chartView.value);
				let dts = dayjs().add(-30, "d");
				for (let i = 0; i < 30; i++) {
					option.xAxis.data.push(dts.format("MM-DD"));
					option.series[0].data.push(randomNum(70, 90));
					dts.add(1, "d");
				}

				useEcharts(myChart, option);
			});
		});
		return () => (
			<div class="zzpower w-full">
				<TimeBtn />
				<div ref={chartView} class="h-full" style="width:440px"></div>
			</div>
		);
	}
});

const TimeBtn = defineComponent({
	setup() {
		const timerBtn = [
			{
				label: "近1月",
				value: 1
			},
			{
				label: "近3月",
				value: 3
			},
			{
				label: "近6月",
				value: 30
			}
		];
		let timeActive = ref(1);
		const timerClick = (val: number) => {
			timeActive.value = val;
		};
		return () => (
			<ul class="timeBtn">
				{timerBtn.map(item => {
					return (
						<li
							class={[item.value === timeActive.value ? "active" : ""]}
							onClick={() => {
								timerClick(item.value);
							}}
						>
							<span>{item.label}</span>
						</li>
					);
				})}
			</ul>
		);
	}
});
